<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css">
</head>
<body>
<div id="app" class="container" >
    <form id="form-query" class="form-inline mt-5">
        <div class="input-group mb-3 ml-3">
            <div class="input-group-prepend">
                <span class="input-group-text">员工编号</span>
            </div>
            <input type="text" class="form-control"v-model="query.e_id" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3 ml-3">
            <div class="input-group-prepend">
                <span class="input-group-text">员工姓名</span>
            </div>
            <input type="text" class="form-control" v-model="query.e_name" aria-describedby="basic-addon1">
        </div>
        <div class="radio">
            <div class="input-group-prepend mb-3 ml-3">
                <span class="input-group-text">性别</span>
                <label>
                    <input type="radio" v-model="query.e_sex" id="optionsRadios1"
                           value="男"> 男
                </label>
                <label>
                    <input type="radio" v-model="query.e_sex" id="optionsRadios2"
                           value="女">女
                </label>
                <label>
                    <input type="radio" v-model="query.e_sex" id="optionsRadios3"
                           value="" checked>无
                </label>
            </div>
        </div>
        <div class="input-group mb-3 ml-3">
            <div class="input-group-prepend">
                <span class="input-group-text">最低工资</span>
            </div>
            <input type="text" class="form-control" v-model="query.e_sal_start" aria-describedby="basic-addon1">
            <div class="input-group-prepend input-group-append">
                <span class="input-group-text">至</span>
            </div>
            <input type="text" class="form-control" v-model="query.e_sal_end" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3 ml-3 ">
            <div class="input-group-prepend">
                <span class="input-group-text">入职起始日期</span>
            </div>
            <input type="date" class="form-control"v-model="query.e_date_start" aria-describedby="basic-addon1">
            <div class="input-group-prepend input-group-append">
                <span class="input-group-text">至</span>
            </div>
            <input type="date" class="form-control" v-model="query.e_date_end" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3 ml-3">
            <button class="btn btn-primary" id="btn_query" @click.prevent="getPage(1)">
                <i class="fa fa-search " aria-hidden="true"></i>查询</button>
        </div>

    </form>
    <div class="btn-group ml-3">
        <button id="del_Many_Emp" type="button" class="btn btn-danger" @click="execMultiDel"><i class="fa fa-trash" aria-hidden="true"  ></i>删除
        </button>
        &nbsp;&nbsp;
        <button id="bn-add" type="button" class="btn btn-primary" @click.prevent="openAddWin"><i class="fa fa-plus-square"  aria-hidden="true"></i>增加
        </button>
    </div>
    <table class="table ml-3 mr-3 mt-3" >
        <thead>
            <tr>
                <th><input type="checkbox" v-model="allChecked"/> {{allChecked}}  </th>
                <th>工号</th><th>姓名</th><th>性别</th><th>入职时间</th><th>工资</th><th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="emp in page.rows">

                <td><input type="checkbox" v-model="delIds" :value="emp.e_id" /></td>
                <td>{{emp.e_id}}</td>
                <td>{{emp.e_name}}</td>
                <td>{{emp.e_sex}}</td>
                <td>{{emp.e_date_str}}</td>
                <td>{{emp.e_sal}}</td>
                <td>
                    <a href="#"  class="btn btn-danger btn-sm" @click.prevent="execDel(emp.e_id)">删除</a>
                     &nbsp;&nbsp;
                    <a href="#"  class="btn btn-primary btn-sm" @click.prevent="openUpdateWin(emp)">修改</a>
                </td>
            </tr>
        </tbody>
    </table>
    <li style="line-height:30px; font-size:20px; color: #1E9FFF">
     本页共{{page.currSize}}条记录,共{{page.pgTotal}}页,共{{page.total}}条记录
    </li>
    <br>
    <nav  class="d-flex flex-row justify-content-between">
        <ul class="pagination pagination-sm">

            <li class="page-item">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text" >每页</span>
                </div>
                <select class="form-control form-control-sm" v-model="query.pageSize" @change="onPageSizeChange">
                    <option v-for="n in pageList" :value="n">{{n}}&nbsp;条记录</option>
                </select>

            </div>
            </li>

            <li class="page-item"><a class="page-link" href="#" @click.prevent="getPage(1)" >首页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="getPage(page.curr-1)" >上页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="getPage(page.curr+1)" >下页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="getPage(page.pgTotal)" >尾页</a></li>
            <li class="page-item">
                <div class="input-group input-group-sm">
                    <div class="input-group-prepend">
                        <span class="input-group-text" >当前第</span>
                    </div>
                    <input class="form-control form-control-sm" style="width:50px;text-align:center;"  v-model="query.pageNumber"  @change="getPage(query.pageNumber);" />
                    <div class="input-group-append">
                        <span class="input-group-text" >页</span>
                    </div>
                </div>
            </li>
        </ul>


    </nav>
    <div id="win-add" style="display:none;padding:15px;">

        <form>
            <div class="form-group">
                <label>姓名:</label>
                <input type="text" class="form-control" v-model="addemp.e_name">
            </div>
            <div class="input-group-prepend mb-3">
                <span>性别:&nbsp;&nbsp;</span>
                <label>
                    <input type="radio" v-model="addemp.e_sex" id="optionsRadios4"
                           value="男" checked> 男
                </label>
                <label>
                    <input type="radio" v-model="addemp.e_sex" id="optionsRadios5"
                           value="女">女
                </label>

            </div>
            <div class="form-group">
                <label>入职日期</label>
                <input type="date" class="form-control" v-model="addemp.e_date">
            </div>
            <div class="form-group">
                <label>工资</label>
                <input type="number" class="form-control" v-model="addemp.e_sal">
            </div>

            <button id="bn-doadd" type="submit" class="btn btn-primary" @click.prevent="execAdd">提交</button>
        </form>
    </div>
    <div id="win-upd" style="display:none;padding:15px;">
        <form>
            <div class="form-group">
                <label>编号:</label>
                <input type="text" class="form-control" v-model="updemp.e_id" readonly="readonly">
            </div>
            <div class="form-group">
                <label>姓名:</label>
                <input type="text" class="form-control" v-model="updemp.e_name">
            </div>
            <div class="input-group-prepend mb-3">
                <span>性别:&nbsp;&nbsp;</span>
                <label>
                    <input type="radio" v-model="updemp.e_sex" id="optionsRadios6" value="男" checked> 男
                </label>
                <label>
                    <input type="radio" v-model="updemp.e_sex" id="optionsRadios7" value="女">女
                </label>

            </div>
            <div class="form-group">
                <label>入职日期</label>
                <input type="date" class="form-control"v-model="updemp.e_date">
            </div>
            <div class="form-group">
                <label>工资</label>
                <input type="number" class="form-control"v-model="updemp.e_sal">
            </div>

            <button id="bn-doupd" type="submit" class="btn btn-primary" @click.prevent="execUpd">提交</button>
        </form>
    </div>

</div>


<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="layer/layer.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    const myutils={};//定义了一个工具对象
    //对象属性拷贝
    myutils.copyProps=function(oldObj){
        let newObj={};
        for(let prop in oldObj){//遍历对象的属性名称（键）
            newObj[prop]=oldObj[prop];
        }
        return newObj;
    }
    //打开修改窗口
    const openUpdateWin = function(emp){

        this.updemp=myutils.copyProps(emp);
        this.updemp.e_date=emp.e_date_str;
        this.winUpdIdx = layer.open({
            type: 1,
            area: ['700px', '540px'],
            content: $('#win-upd')
        });
    };
    //执行删除
    const execDel=function(eid){
        let loadIdx = layer.load();// 加载提示
        axios.delete(`Emp/${eid}`)
            .then(function(resp){

                layer.close(loadIdx);

                let result = resp.data;
                if(result.success){
                    vm.getPage(vm.page.curr);
                    layer.msg(result.message,{icon: 6,time: 1500});
                }else{
                    layer.alert(result.message, {icon: 5});
                }
            })
            .catch((error)=>{
                console.log(error);
                layer.close(loadIdx);
                layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
            });

    };
    //执行修改
    const execUpd=function(){
        let loadIdx = layer.load();// 加载提示
        axios.put('Emp',this.updemp)
            .then(function(resp){
                layer.close(loadIdx);
                let result = resp.data;
                if(result.success){
                    vm.getPage(vm.page.curr);
                    layer.close(vm.winUpdIdx);// 关闭增加窗口
                    layer.msg(result.message,{icon: 6,time: 1500});
                }else{
                    layer.alert(result.message, {icon: 5});
                }
            })
            .catch((error)=>{
                console.log(error);
                layer.close(loadIdx);
                layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
            });

    };
    //执行多删除
    const execMultiDel=function(){
        let loadIdx = layer.load();// 加载提示
        axios.delete('Emp',{data:this.delIds})
            .then(function(resp){
                layer.close(loadIdx);
                let result = resp.data;
                if(result.success){
                    vm.getPage(vm.page.curr);
                    layer.msg(result.message,{icon: 6,time: 1500});
                }else{
                    layer.alert(result.message, {icon: 5});
                }
            })
            .catch((error)=>{
                console.log(error);
                layer.close(loadIdx);
                layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
            });

    };

    let vm=new Vue({
        el:"#app",
        data:{
            query:{
                pageNumber:1,
                pageSize:3
            },

            //当前页面数据
            page:{},
            pageList:[3,5,8,10,20],
            //增加对象
            addemp:{},
            winAddIdx:null,
            //修改
            updemp:{},
            winUpdIdx:null,
            //多删
            delIds:[],
            //全选控制
            allChecked:false
        },
        methods:{
            getPage(pageNumber){
                this.query.pageNumber=pageNumber;
                axios.get('Emp',{
                    params:this.query
                })
                    .then((response)=>{
                        this.allChecked=false;
                        this.page=response.data;

                        //以服务器的数据修正query对象中的页码和每页记录数
                        this.query.pageNumber=this.page.curr;
                        this.query.pageSize=this.page.pageSize;

                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            //打开增加窗口
            openAddWin() {
                this.addemp = {};//重置表单
                this.winAddIdx = layer.open({
                    type: 1,
                    area: ['700px', '540px'],
                    content: $('#win-add')
                });
            },
            onPageSizeChange(){
                this.getPage(1);
            },
            //执行添加
            execAdd(){
                let loadIdx = layer.load();// 加载提示
                axios.post('Emp',this.addemp)
                    .then((resp)=>{
                        layer.close(loadIdx);
                        const result = resp.data;
                        if(result.success){
                            this.getPage(this.page.pgTotal+1);//刷新数据
                            layer.close(this.winAddIdx);// 关闭增加窗口
                            layer.msg(result.message,{icon: 6,time: 1500});
                        }else{
                            layer.alert(result.message, {icon: 5});
                        }
                    })
                    .catch((error)=>{
                        console.log(error);
                        layer.close(loadIdx);
                        layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
                    });
                },

            //打开修改窗口
            openUpdateWin,
            //执行修改
            execUpd,
            //执行多删
            execMultiDel,
        },
        mounted() {
            this.getPage(1);
        },
        watch:{//侦听属性变换
            allChecked(newValue,oldValue){
                console.log(`${oldValue}->${newValue}`);
                if(newValue){
                    let arr =[];
                    for(let emp of this.page.rows){
                        arr.push(emp.e_id);
                    }

                    this.delIds=arr;
                }else{
                    this.delIds=[];
                }
            },
        }
    });

</script>

</body>
</html>



